{extend name="base"/}
{block name="resources"}
<style>
	.order-detail .layui-input-block{margin-left:65px;min-height:auto!important}
	.order-detail .layui-form-label{padding:2px 0!important;color:#999!important;width:70px!important;text-align:right!important}
	.order-detail .layui-form-mid{padding:3px 0!important}
	.order-detail .layui-form-item{margin-bottom:0!important}
	.order-detail .order-detail-hr{border-bottom:1px solid #f6f6f6;margin-bottom:8px!important}
	.order-detail .layui-card{box-shadow:unset}
	.order-detail-operation .layui-card{margin-left:40px}
	.order-detail .layui-card .layui-card-header{font-weight:700;height:30px;line-height:30px;border-bottom:none}
	.order-detail-operation{background-color:#FFF;margin-top:5px}
	.order-detail-operation .layui-card .layui-card-body{padding:1px 15px!important;position:relative;border-bottom:none;margin-top: 15px;}
	.order-detail-operation .layui-card .layui-card-body .order-detail-tips{font-size:12px;color:#999!important;margin-bottom:30px}
	.order-detail-operation .layui-card .layui-card-body i{position:absolute;left:-11px;top:-41px;font-size:21px!important;}
	.order-detail-left{border-right:1px solid #EAEAEA}
	.order-detail-info{position:relative;background-color:#FFF;border:1px solid #EAEAEA;padding:10px;overflow: hidden;}
	.order-detail-dl dl dd{height:18px;line-height:18px}
	.order-detail-total{font-size:14px;color:#666;text-align: right;height: 30px;line-height: 30px;}
	.order-detail-total span em{color:#FF5722;font-style: normal;}
	.order-detail-total span{margin-left: 10px;}
	.order-detail-table table td{font-size:12px}
</style>
{/block}
{block name="main"}
<div class="block-content">

	<div style="padding: 1px;" class="order-detail">

		<div class="layui-row layui-col-space1 order-detail-info" >
			<div class="layui-col-md4 order-detail-left" >
				<div class="layui-card">
					<div class="layui-card-header">订单信息</div>
					<div class="layui-card-body">
						<div class="layui-form">
							<div class="layui-form-item">
								<label class="layui-form-label">订单编号：</label>
								<div class="layui-input-block">
									<div class="layui-inline">
										<div class="layui-form-mid layui-word-aux">{$detail.out_trade_no}</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">订单类型：</label>
								<div class="layui-input-block">
									<div class="layui-inline">
										<div class="layui-form-mid layui-word-aux">{$detail.order_type_name}</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">付款方式：</label>
								<div class="layui-input-block">
									<div class="layui-inline">
										<div class="layui-form-mid layui-word-aux">{$detail.pay_type_name}</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">订单流水：</label>
								<div class="layui-input-block">
									<div class="layui-inline">
										<div class="layui-form-mid layui-word-aux">{$detail.out_trade_no}</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">付款时间：</label>
								<div class="layui-input-block">
									<div class="layui-inline">
										<div class="layui-form-mid layui-word-aux">{:time_to_date($detail.create_time)}</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item order-detail-hr"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md8 order-detail-operation">
				<div class="layui-card">
					<div class="layui-card-header">订单状态：{$detail.order_status_name}</div>
					<div class="layui-card-body">
						<i class="layui-icon ns-red-color layui-icon-about"></i>
						{if $detail.order_status != -1 && $detail.order_status != 1}
						<button  class="layui-btn ns-bg-color close-order">关闭</button>
						{/if}
						{if $detail.order_status == 0}
						<a href="javascript:;" class="layui-btn ns-bg-color payment-order">支付</a>
						{/if}
						{if $detail.order_status == 3}
						<a href="javascript:;" class="layui-btn ns-bg-color re-examination">编辑</a>
						{/if}
					</div>
				</div>
			</div>

		</div>
	</div>

	<div style="height:50px;"></div>

	<div class="order-detail-table">
		<table class="layui-table">
			<colgroup>
				<col width="300">
				<col>
				<col>
				<col>
				<col>
			</colgroup>
			<thead>
			<tr>
				<th>产品信息</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
			</thead>
			<tbody>
			<!-- 套餐 -->
			{if $detail.group_id > 0 &&  $detail.group_num > 0}
			<tr>
				<td>
					<div class="ns-table-title">
						<div class="ns-title-pic">
							<img src="{:img($detail.group_image)}" alt="">
						</div>
						<span class="ns-title-content">{$detail.group_name}</span>
					</div>
				</td>
				<td>{$detail.group_period_price}</td>
				<td>{$detail.group_num}</td>
				<td>{$detail.group_money}</td>
			</tr>
			{/if}

			<!-- 短信 -->
			{if $detail.sms_package_id > 0 &&  $detail.sms_num > 0}
			<tr>
				<td>
					<div class="ns-table-title">
						<div class="ns-title-pic">
							<img src="{:img($detail.sms_package_image)}" alt="">
						</div>
						<span class="ns-title-content">{$detail.sms_package_name}</span>
					</div>
				</td>
				<td>{$detail.sms_package_price}</td>
				<td>{$detail.sms_num}</td>
				<td>{$detail.sms_money}</td>
			</tr>
			{/if}
			</tbody>
		</table>

		<div class="layui-row order-detail-total">
			<div class="layui-col-md12">
				<span>总计：{$detail.order_money}</span>
			</div>
		</div>
	</div>
</div>

{/block}
{block name="script"}
<script type="text/html" id="payment">
	<div class="layui-form">
		<input type="hidden" name="out_trade_no" value={{d.out_trade_no}}>

		<div class="layui-form-item">
			<label class="layui-form-label img-upload-lable"><span class="required">*</span>付款凭证：</label>
			<div class="layui-input-inline img-upload">
				<div class="upload-img-block icon">
					<div class="upload-img-box" id="voucher">
						<div class="ns-upload-default">
							<img src="SHOP_IMG/upload_img.png" />
							<p>点击上传</p>
						</div>
					</div>
					<input type="hidden" name="paying_money_certificate"/>
					<i class="del">x</i>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label"><span class="required">*</span>付款凭证说明：</label>
			<div class="layui-input-inline">
				<textarea name="paying_money_certificate_explain" class="layui-textarea ns-len-mid" lay-verify="required" placeholder="请输入付款凭证说明"></textarea>
			</div>
		</div>

		<!-- 表单操作 -->
		<div class="ns-form-row">
			<button class="layui-btn ns-bg-color" lay-submit lay-filter="submit">提交</button>
			<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
		</div>
	</div>
</script>

<script>
	var out_trade_no = "{$detail.out_trade_no}";

	/* 关闭订单 */
	$("body").on("click",".close-order",function () {
		$.ajax({
			type : "post",
			dataType: 'JSON',
			url: ns.url("home/order/close"),
			data : { "order_id" : data.order_id },
			success : function(res) {
				repeat_flag = false;
				layer.msg(res.message,{anim: 0},function () {
					layer.closeAll();
					window.location.reload();
				});
			}
		});
	});

	/* 支付 */
	$("body").on("click",".payment-order",function () {
		location.href = ns.url("home/ordercreate/confirm",{out_trade_no:out_trade_no});
	});

	layui.use(['form','laytpl'],function () {
		var form = layui.form;
		var laytpl = layui.laytpl;
		var upload;

		/* 编辑 */
		$("body").on("click",".re-examination",function () {
			data = {out_trade_no:out_trade_no};
			laytpl($("#payment").html()).render(data, function(html) {
				layer.open({
					type: 1,
					title: '编辑',
					area: ['700px', '400px'],
					content: html
					, yes: function (index, layero) {
						layer.close(index);
					}
				});

				//上传支付凭证
				upload = new Upload({
					elem: '#voucher'
				});
			});
		});

		form.on('submit(submit)', function(data){
			// 删除图片
			if(!data.field.paying_money_certificate) upload.delete();

			if (repeat_flag) return false;
			repeat_flag = true;

			$.ajax({
				type: 'POST',
				url: ns.url("home/ordercreate/confirm"),
				data: data.field,
				dataType: 'JSON',
				success: function(res) {
					repeat_flag = false;
					layer.msg(res.message);
					if (res.code == 0) {
						layer.closeAll();
						location.reload();
					}
				}
			});
		});
	})
</script>
{/block}